<div class="layui-card layadmin-tabs-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb">
            <a href="/management/index">首页</a>
            <a href="/management/index#/menu">菜单管理</a>
            <a><cite>角色菜单添加</cite></a>
        </span>
    </div>
</div>
<div class="layui-fluid layadmin-container" id="NB-menu-add">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header layui-elip">
                添加角色菜单（目前仅支持<span style="color:#FF5722;">三级菜单</span>（不包含根目录），请悉知）
            </div>
            <div class="layui-card-body">
                <form class="layui-form" style="padding: 20px 30px 0 0;" lay-filter="NB-add-menu">
                    <input type="hidden" name="roleId" :value="roleId">
                    <input type="hidden" name="parentId" :value="parentId">
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入菜单名称"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="type" value="PARENT" title="目录菜单" :checked="type == 'PARENT'"
                                   lay-filter="type">
                            <input type="radio" name="type" value="LEAF" title="链接菜单" :checked="type == 'LEAF'"
                                   lay-filter="type">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单图标</label>
                        <div class="layui-input-inline">
                            <input type="text" name="icon" required lay-verify="required" placeholder="字体图标样式类名"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux"><a target="_blank" @click="seeIcons"
                                                                      style="cursor:pointer;"><i
                                class="layui-icon layui-icon-search"></i> 查看应用包含的图标</a></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <input type="text" name="remark" required lay-verify="required" placeholder="请输入菜单备注"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" v-if="type != 'PARENT'">
                        <label class="layui-form-label">菜单资源</label>
                        <div class="layui-input-block">
                            <select name="resource" lay-verify="required">
                                <option value=""></option>
                                <template v-for="res in resources">
                                    <option :value="res.id">{{optionVal(res)}}</option>
                                </template>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否可用</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="enable" :value="enable"
                                   lay-skin="switch" lay-text="可用|不可用" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-bg-cyan" lay-submit lay-filter="addMenu">立即提交
                            </button>
                            <a class="layui-btn" :href="'/management/index#/menu?roleId='+roleId">返回</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var addMenuApp = new Vue({
        el: '#NB-menu-add'
        , data: {
            resources: [[${resources}]]
            , roleId: [[${roleId}]]
            , parentId: [[${parentId}]]
            , type: "PARENT"
            , enable: 1
        }
        , updated: function () {
            window._layform.render();
        }
        , mounted: function () {
            layui.use(['form', 'element'], function () {
                var form = window._layform = layui.form,
                    element = window._layelem = layui.element;
                element.render();

                form.on('submit(addMenu)', function (data) {
                    if (!data.field.enable) {
                        data.field.enable = 0;
                    }
                    $.post(BMY.url.prefix + '/menu/create', data.field, function (resp) {
                        layer.msg(resp.message);
                        if (resp.code === 200) {
                            setTimeout(function () {
                                location.hash = vipspa.stringifyDefault("/menu");
                            }, 1000);
                        }
                    });
                    return false;
                });

                form.on('radio(type)', function (data) {
                    addMenuApp.type = data.value;
                });


            })
        }
        , methods: {
            optionVal: function (res) {
                return res.name + "「" + res.url + "」";
            }
            , seeIcons: function () {
                layer.open({
                    type: 2,
                    title: "字体图标列表",
                    area: ['480px', '230px'],
                    fixed: false, //不固定
                    content: '/font/list'
                });
            }
        }
    });

</script>